<template>
	<view class="cardBox">
		
		<!--运输单 跨境货代单  货物(预付全款)单-->
		<view v-if="order.orderInfo.type=='transport'||(order.orderInfo.type=='goods'&&order.orderInfo.show_pay_type.value==1)
			||order.orderInfo.type=='crossborder'">
			
			<view class="text_prove" >{{text.pay_prove}} :</view><!--付款证明-->
			
			<view v-if="(order.role==2&&order.orderInfo.type=='transport'&&(order.orderInfo.release_info.release_type==2||(order.orderInfo.release_info.release_type==3&&order.orderInfo.release_info.human_type==1)))
		||(order.role==1&&order.orderInfo.type=='transport'&&(order.orderInfo.release_info.release_type==1||(order.orderInfo.release_info.release_type==3&&order.orderInfo.release_info.human_type==2)))
		||(order.orderInfo.type=='goods'&&order.role==2)||(order.orderInfo.type=='crossborder'&&order.role==2)">  <!--参与方 付款证明-->
				<view v-if="order.orderInfo.payment_proof" style="float: left;">  
					<u-upload ref="uUpload" :auto-upload="true" :upload-text="$t('选择图片')" :action="releasePayImgAction"
						:file-list="payment_proof_img" max-count="1" :deletable="false"></u-upload>
				</view>
				<view class="wait_upload" v-else>
					{{$t("暂未上传")}}
				</view>
				<view class="yitijiao" v-if="order.orderInfo.payment_proof">{{order.orderInfo.payment_proof_time}}{{$t("已提交")}}</view>
			</view>
			
			<view v-else-if="(order.role==1&&order.orderInfo.type=='transport'&&(order.orderInfo.release_info.release_type==2||(order.orderInfo.release_info.release_type==3&&order.orderInfo.release_info.human_type==1)))
		||(order.role==2&&order.orderInfo.type=='transport'&&(order.orderInfo.release_info.release_type==1||(order.orderInfo.release_info.release_type==3&&order.orderInfo.release_info.human_type==2)))
		||(order.orderInfo.type=='goods'&&order.role==1)||(order.orderInfo.type=='crossborder'&&order.role==1)">  <!--发布方 付款证明-->
				<u-upload ref="uUploads" :auto-upload="true" :upload-text="$t('选择图片')" :action="releasePayImgAction"
					:file-list="payment_proof_img" max-count="1" :deletable="payment_proof_img.length==0?true:false" 
					style="float: left;"></u-upload>
				<view class="dofukuan" @click="doSavefukuan" v-if="payment_proof_img.length==0">{{$t("提交")}}</view>
				<view class="yitijiao" v-else>{{order.orderInfo.payment_proof_time}} {{$t("已提交")}}</view>
			</view>
			
			
			
			<view style="height: 10rpx;width: 100%;clear: both;"></view>
			
			
			<view class="text_prove" >{{text.collect_prove}} :</view>  <!--收款证明-->
			
			<view v-if="(order.role==1&&order.orderInfo.type=='transport'&&(order.orderInfo.release_info.release_type==2||(order.orderInfo.release_info.release_type==3&&order.orderInfo.release_info.human_type==1)))
		||(order.role==2&&order.orderInfo.type=='transport'&&(order.orderInfo.release_info.release_type==1||(order.orderInfo.release_info.release_type==3&&order.orderInfo.release_info.human_type==2)))
		||(order.orderInfo.type=='goods'&&order.role==1)||(order.orderInfo.type=='crossborder'&&order.role==1)">		<!--发布方 收款证明-->
				<view v-if="order.orderJoin.charge_certificate" style="float: left;">
					<u-upload ref="uUpload" :auto-upload="true" :upload-text="$t('选择图片')" :action="releasePayImgAction"
						:file-list="charge_certificate_img" max-count="1" :deletable="false"></u-upload>
				</view>
				<view class="wait_upload" v-else>
					{{$t("暂未上传")}}
				</view>
				<view class="yitijiao" v-if="order.orderJoin.charge_certificate">{{order.orderJoin.charge_certificate_time}}{{$t("已提交")}}</view>
			</view>
			
			<view v-else-if="(order.role==2&&order.orderInfo.type=='transport'&&(order.orderInfo.release_info.release_type==2||(order.orderInfo.release_info.release_type==3&&order.orderInfo.release_info.human_type==1)))
		||(order.role==1&&order.orderInfo.type=='transport'&&(order.orderInfo.release_info.release_type==1||(order.orderInfo.release_info.release_type==3&&order.orderInfo.release_info.human_type==2)))
		||(order.orderInfo.type=='goods'&&order.role==2)||(order.orderInfo.type=='crossborder'&&order.role==2)">	<!--参与方 收款证明-->
				<u-upload ref="uUpload" :auto-upload="true" :upload-text="$t('选择图片')" :action="releasePayImgAction"
					:file-list="charge_certificate_img" max-count="1" :deletable="charge_certificate_img.length==0?true:false"
					style="float: left;"></u-upload>
				<view class="dofukuan" @click="doSaveshoukuan" v-if="charge_certificate_img.length==0">
					{{$t("提交")}}</view>
				<view class="yitijiao" v-else>{{order.orderJoin.charge_certificate_time}}{{$t("已提交")}}</view>
			</view>
			
			<view style="height: 10rpx;width: 100%;clear: both;"></view>
		</view>


		<!--发布方上传打款进度图片   货物 预付定金-->
		<view v-if="order.orderInfo.type=='goods'&&order.orderInfo.show_pay_type.value==2">
			<view class="release-pay-img" v-if="jindu=='deposit_pay'||jindu=='deposit_collection'">
				<view class="text">{{ $t('定金付款证明') }}：</view>
				
				<!--参与方付款-->
				<view v-if="order.role==2 && order.orderInfo.type=='goods'">
					<view v-if="order.orderInfo.releasePayImgList">
						<image :src="IMAGE_URL+order.orderInfo.releasePayImgList" class="order_img text_prove"
							@click.stop="preview(IMAGE_URL+order.orderInfo.releasePayImgList)"></image>
					</view>
					<view class="wait_upload2" v-else>
						{{$t("暂未上传")}}
					</view>
				</view>
				
				<!--发布方付款-->
				<view v-else>
					<u-upload ref="uUpload" :auto-upload="true" :upload-text="$t('选择图片')" :action="releasePayImgAction"
						:file-list="releasePayImgList" max-count="1" :deletable="releasePayImgList.length==0?true:false"
						></u-upload>
				</view>
				<!--发布方提交 -->
				<view class="viewBtn" @click="doSaveReleasePayImg"
					v-if="order.role==1 && order.orderInfo.type=='goods' && releasePayImgList.length==0">
					{{ $t('提交') }}
				</view>
				
			</view>
			
			
			<!--参与方确认对方打款进度-->
			<view class="release-pay-img" v-if="jindu=='deposit_pay'||jindu=='deposit_collection'">
				<view class="text">{{ $t('定金收款证明') }}：</view>
				
				<view v-if="order.role==2 && order.orderInfo.type=='goods'">
					<u-upload ref="uUpload" :auto-upload="true" :upload-text="$t('选择图片')" :action="releasePayImgAction"
						:file-list="releasePayImgList1" max-count="1" :deletable="releasePayImgList1.length==0?true:false"
						></u-upload>
				</view>
				
				<view v-else>
					<view v-if="order.orderJoin.releasePayImgList1">
						<image :src="IMAGE_URL+order.orderJoin.releasePayImgList1" class="order_img text_prove"
							@click.stop="preview(IMAGE_URL+order.orderJoin.releasePayImgList1)"></image>
					</view>
					<view class="wait_upload2" v-else>
						{{$t("暂未上传")}}
					</view>
				</view>
				
				<!--参与方提交 -->
				<view class="viewBtn" @click="doSaveJoinPayImg"
					v-if="order.role==2 && order.orderInfo.type=='goods' &&  releasePayImgList1.length==0">
					{{ $t('提交') }}
				</view>
			</view>
			
			
			
			<!--发布方上传尾款进度图片-->
			<view class="release-pay-img" v-if="jindu=='arrears_pay'||jindu=='arrears_collection'">
				<view class="text">{{ $t('尾款付款证明') }}：</view>
				
				<!--发布方看尾款证明-->
				<view v-if="order.role==1 && order.orderInfo.type=='goods'">
					<u-upload ref="uUpload" :auto-upload="true" :upload-text="$t('选择图片')" :action="releasePayImgAction"
						:file-list="releasePayEndImgList" max-count="1" :deletable="releasePayEndImgList.length==0?true:false"
						></u-upload>
				</view>
				
				<view v-else>
					<view v-if="order.orderInfo.final_payment">
						<image :src="IMAGE_URL+order.orderInfo.final_payment" class="order_img text_prove"
							@click.stop="preview(IMAGE_URL+order.orderInfo.final_payment)"></image>
					</view>
					<view class="wait_upload2" v-else>
						{{$t("暂未上传")}}
					</view>
				</view>
				
				<!--发布方 传尾款证明-->
				<view class="viewBtn" @click="doSaveReleasePayEndImg"
					v-if="order.role==1 && order.orderInfo.type=='goods' && releasePayEndImgList.length==0">
					{{ $t('提交') }}
				</view>
			</view>
			
			
			<!--参与方确认对方尾款进度-->
			<view class="release-pay-img" v-if="jindu=='arrears_pay'||jindu=='arrears_collection'">
				<view class="text">{{ $t('尾款收款证明') }}：</view>
				<view v-if="order.role==2 && order.orderInfo.type=='goods'">
					<u-upload ref="uUpload" :auto-upload="true" :upload-text="$t('选择图片')" :action="releasePayImgAction"
						:file-list="releasePayEndImgList1" max-count="1" :deletable="releasePayEndImgList1.length==0?true:false"
						></u-upload>
				</view>
				<view v-else>
					<view v-if="order.orderJoin.final_payment">
						<image :src="IMAGE_URL+order.orderJoin.final_payment" class="order_img text_prove"
							@click.stop="preview(IMAGE_URL+order.orderJoin.final_payment)"></image>
					</view>
					<view class="wait_upload2" v-else>
						{{$t("暂未上传")}}
					</view>
				</view>
				
				<!--参与方 传尾款证明-->
				<view class="viewBtn" @click="doSaveJoinPayEndImg"
					v-if="order.role==2 && order.orderInfo.type=='goods' && releasePayEndImgList1.length==0">
					{{ $t('提交') }}
				</view>
				
			</view>
		</view>
	</view>
</template>

<script>
	import {
		HTTP_REQUEST_URL,
		HTTP_IMG_UTL,
		IMAGE_URL
	} from "@/config/app";

	export default {
		components: {

		},
		props: {
			order: {
				type: [Array, Object, Number, String],
				default: ''
			},
			jindu: {
				type: [Array, Object, Number, String],
				default: '',
			},
		},
		data() {
			return {
				//远程域名
				HTTP_IMG_UTL,
				HTTP_REQUEST_URL,
				IMAGE_URL,
				url: IMAGE_URL,

				//语言
				lang: this.$i18n.locale,

				//文字
				text: {
					collect_prove: this.$t('收款证明'),
					pay_prove: this.$t('付款证明'),

				},
				img: HTTP_IMG_UTL + 'huangjin.png',
				
				releasePayImgAction: HTTP_REQUEST_URL + '/common/upload',
				
				releasePayImgList: [],
				releasePayImgList1: [],
				
				contentJoinPayImg: this.$t("是否确认打款？"),
				contentJoinPayEndImg: this.$t("是否确认打款？"),
				
				releasePayEndImgList: [],
				releasePayEndImgList1: [],
				
				payment_proof_img: [],
				charge_certificate_img: [],
				
				is_tj: 1,

			}
		},
		mounted() {
			if (this.order) {
				
				if (this.order.orderInfo.payment_proof) { //付款证明
					this.payment_proof_img = [{
						url: this.IMAGE_URL + this.order.orderInfo.payment_proof
					}]
				}
				if (this.payment_proof_img.length > 0) {
					this.payment_proof_img = [{
						url: this.payment_proof_img[0].url
					}]
				}
				
				
				if (this.order.orderJoin.charge_certificate) {	//收款证明
					this.charge_certificate_img = [{
						url: this.IMAGE_URL + this.order.orderJoin.charge_certificate
					}]
				}
				if (this.charge_certificate_img.length > 0) {
					this.charge_certificate_img = [{
						url: this.charge_certificate_img[0].url
					}]
				}
				
				
				if (this.order.orderInfo.releasePayImgList) {	//定金付款证明
					this.releasePayImgList = [{
						url: this.IMAGE_URL + this.order.orderInfo.releasePayImgList
					}]
				}
				if (this.order.orderJoin.releasePayImgList1) {	//定金收款证明
					this.releasePayImgList1 = [{
						url: this.IMAGE_URL + this.order.orderJoin.releasePayImgList1
					}]
				}
				
				
				if (this.order.orderInfo.final_payment) {		//尾款付款证明
					this.releasePayEndImgList = [{
						url: this.IMAGE_URL + this.order.orderInfo.final_payment
					}]
				}
				if (this.order.orderJoin.final_payment) {		//尾款收款证明
					this.releasePayEndImgList1 = [{
						url: this.IMAGE_URL + this.order.orderJoin.final_payment
					}]
				}
			}
		},
		methods: {
			// 预览图片
			preview(e) {
				this.$emit('on-oversize', 2);
				uni.previewImage({
					current: e, // 当前显示的图片链接
					urls: [e] // 需要预览的图片链接列表
				});
			},

			//发布方预付定金 定金付款
			doSaveReleasePayImg() {
				let files = [];
				files = this.$refs.uUpload.lists.filter(val => {
					return val.progress == 100;
				})
				const that = this
				if (files.length > 0) {
					that.$u.api.order.paymentProof({
						order_id: that.order.orderInfo.id,
						join_order_id: that.order.orderInfo.join_order_id,
						releasePayImgList: files[0].response.data.url,
						role: that.order.role,
					}).then(res => {
						that.$u.toast(that.$t('操作成功'), 2000)
						that.$emit('on-oversize', that.is_tj);
					})
				}
				if (files.length === 0) {
					that.$u.toast(that.$t('上传定金付款证明图片'), 2000)
					return false
				}

				if (files.length > 0) {
					that.releasePayImgList = [{ url: that.IMAGE_URL + files[0].response.data.url}]
				}
			},
			
			//参与方预付定金 定金收款
			doSaveJoinPayImg() {
				let files = [];
				files = this.$refs.uUpload.lists.filter(val => {
					return val.progress == 100;
				})
				const that = this
				if (files.length > 0) {
					that.$u.api.order.paymentProof({
						order_id: that.order.orderInfo.id,
						join_order_id: that.order.orderInfo.join_order_id,
						releasePayImgList1: files[0].response.data.url,
						role: that.order.role,
					}).then(res => {
						that.$u.toast(that.$t('操作成功'), 2000)
						that.$emit('on-oversize', that.is_tj);
					})
				}
				if (files.length === 0) {
					that.$u.toast(that.$t('上传定金收款证明图片'), 2000)
					return false
				}
				if (files.length > 0) {
					that.releasePayImgList1 = [{url: that.IMAGE_URL + files[0].response.data.url}]
				}
			},
			
			//发布方预付定金 尾款付款
			doSaveReleasePayEndImg() {
				let files = [];
				files = this.$refs.uUpload.lists.filter(val => {
					return val.progress == 100;
				})
				const that = this
				if (files.length > 0) {
					that.$u.api.order.paymentProof({
						order_id: that.order.orderInfo.id,
						join_order_id: that.order.orderInfo.join_order_id,
						final_payment: files[0].response.data.url,
						role: that.order.role,
					}).then(res => {
						that.$u.toast(that.$t('操作成功'), 2000)
						that.$emit('on-oversize', that.is_tj);
					})
				}
				if (files.length === 0) {
					that.$u.toast(that.$t('上传尾款付款证明图片'), 2000)
					return false
				}
				
			},
			
			//参与方预付定金 尾款收款
			doSaveJoinPayEndImg() {
				let files = [];
				files = this.$refs.uUpload.lists.filter(val => {
					return val.progress == 100;
				})
				const that = this
				if (files.length > 0) {
					that.$u.api.order.paymentProof({
						order_id: that.order.orderInfo.id,
						join_order_id: that.order.orderInfo.join_order_id,
						final_payment1: files[0].response.data.url,
						role: that.order.role,
					}).then(res => {
						that.$u.toast(that.$t('操作成功'), 2000)
						that.$emit('on-oversize', that.is_tj);
					})
				}
				if (files.length === 0) {
					that.$u.toast(that.$t('上传尾款收款证明图片'), 2000)
					return false
				}

				
			},
			
			
			
			//预付全款 之发布方 付款
			doSavefukuan() {
				let files = [];
				files = this.$refs.uUploads.lists.filter(val => {
					return val.progress == 100;
				})
				const that = this
				if (files.length > 0) {
					that.$u.api.order.paymentProof({
						order_id: that.order.orderInfo.id,
						join_order_id: that.order.orderInfo.join_order_id,
						payment_proof: files[0].response.data.url,
						role: that.order.role,
					}).then(res => {
						that.$u.toast(that.$t('操作成功'), 2000)
						that.$emit('on-oversize', that.is_tj);
					})
				}
				if (files.length === 0) {
					that.$u.toast(that.$t('上传付款证明图片'), 2000)
					return false
				}

				if (files.length > 0) {
					that.payment_proof_img = {url: that.IMAGE_URL + files[0].response.data.url}
				}
			},
			
			//预付全款 之参与方 收款
			doSaveshoukuan() {
				let files = [];
				files = this.$refs.uUpload.lists.filter(val => {
					return val.progress == 100;
				})
				const that = this
				if (files.length > 0) {
					that.$u.api.order.paymentProof({
						order_id: that.order.orderInfo.id,
						join_order_id: that.order.orderInfo.join_order_id,
						charge_certificate: files[0].response.data.url,
						role: that.order.role,
					}).then(res => {
						that.$u.toast(that.$t('操作成功'), 2000)
						that.$emit('on-oversize', that.is_tj);
					})
				}
				
				if (files.length === 0) {
					that.$u.toast(that.$t('上传收款证明图片'), 2000)
					return false
				}

				if (files.length > 0) {
					that.charge_certificate_img = [{url: that.IMAGE_URL + files[0].response.data.url}]
				}
			}
			
		}
	}
</script>

<style lang="scss" scoped>
	@import "@/common/orderDetail.scss";
	@import "uview-ui/index.scss";

	.release-pay-img {
		background-color: #FFFFFF;
		padding: 10px 0;
		align-items: center;
		position: relative;

		.text {
			overflow: hidden;
			max-width: 260rpx;
		}
	}

	.viewBtn {
		position: absolute;
		top: 40%;
		left: 44%;
		padding: 2% 4%;
		background: orange;
		color: #fff;
		border-radius: 6px;
	}
	.text_prove{
		font-size: 14px;margin:0rpx 3%;margin-top: 20rpx;
	}
	.wait_upload{
		padding-left: 12px;margin-top: 12px;float: left;
	}
	.wait_upload2{
		padding-left: 12px;margin-top: 12px;
	}
	.yitijiao{
		padding-left: 12px;margin-top: 25%;float: right;
	}
	.dofukuan{
		float: left;margin-left: 10%;margin-top: 10%;background: orange;color: #fff;padding: 2% 4%;border-radius: 6px;
	}
</style>